<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/static/layui-v2.6.8/layui/css/layui.css">
</head>
<style>
    .box {

        text-align: center;
        color: #808080;
    }

    /* .c-gray {
color: #ccc;
}

.c-green {
color: #16a840;
}

.c-red {
color: #dd4f43;
} */

    a {
        text-decoration: none;
        color: skyblue;

    }

    /* .layui-footer{
background-color: #23262e;
} */
    .tdo {
        background-color: #e0dcdc;
    }
</style>

<body>
    <div class="layui-layout layui-layout-admin">
        <!-- 引入公共页面 -->
        {{include "./common/header.html" }}

        <!-- 引入公共页面 -->
        {{include "./common/side-menu.html" }}


        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div style="padding: 15px;background-color: #f1f3f4;">
                <h1 style="text-align: center;color: gray;">文章列表</h1>
                <h2 style="text-align: center;color: gray;">
                    Last_time:{{userInfo.last_login_date | dealDate
                    'YYYY-MM-DD '}}</h2>
                <div class="box">
                    <table align="center" width="1050px" border="1px" rules="all" class="layui-table">
                        <tr class="tr">
                            <td class="tdo">序号</td>
                            <td class="tdo">作者</td>
                            <td class="tdo">标题</td>
                            <td class="tdo">内容</td>
                            <td class="tdo">分类</td>
                            <td class="tdo">图片</td>
                            <td class="tdo">链接</td>
                            <td class="tdo">状态</td>
                            <td class="tdo">添加时间</td>
                            <td class="tdo">操作</td>
                        </tr>
                        {{each articles item index}}
                        <tr>
                            <td>{{index + 1}}</td>
                            <td>{{item.author}}</td>
                            <td>{{item.article}}</td>
                            <td>{{item.content}}</td>
                            <td>{{item.cate_name}}</td>
                            <td><img src="/{{item.img}}" alt="" width="100px"></td>
                            <td><a href="#"
                                    class="layui-btn layui-btn-primary layui-border-blue layui-btn layui-btn-sm">查看详情</a>
                            </td>
                            <!-- <td>{{item.content}}</td> -->

                            <!-- <td>{{item.author}}</td> -->

                            <td>
                                {{if item.Audit_status == 0}}
                                <span
                                    class="layui-btn layui-btn-primary layui-border-black layui-btn layui-btn-sm">待审核</span>
                                {{else if item.Audit_status == 1}}
                                <span
                                    class="layui-btn layui-btn-primary layui-border-green layui-btn layui-btn-sm">审核通过</span>
                                {{else}}
                                <span
                                    class="layui-btn layui-btn-primary layui-border-red layui-btn layui-btn-sm">审核失败</span>
                                {{/if}}
                                <!-- {{@ item.Audit_status_text}} -->
                            </td>
                            <td>{{item.addtime | dateFormat 'YYYY-MM-DD'}}</td>
                            <td>
                                <a href="/edit?id={{item.id}}"
                                    class="layui-btn layui-btn-primary layui-border-green layui-btn layui-btn-sm">编辑</a>
                                <!-- <a href="javascript:;" onclick="confirmDelete('{{item.id}}','{{item.img}}');">永久删除</a> -->
                                <a href="javascript:viid(0)" onclick="ajaxDelete('{{item.id}}','{{item.img}}')"
                                    class="layui-btn layui-btn-primary layui-border-orange layui-btn layui-btn-sm">删除</a>
                                <a href="/recycle?id={{item.id}}"
                                    class="layui-btn layui-btn-primary layui-border-red layui-btn layui-btn-sm">加入回收站</a>
                            </td>
                        </tr>
                        {{/each}}
                    </table>
                </div>
            </div>
        </div>

        {{include "./common/footer.html" }}
    </div>

</body>
<script src="/static/js/jquery.js"></script>
<script src="/static/plugins/layer/layer.js"></script>
<script>

    //JS 
    layui.use(['element', 'layer', 'util'], function () {
        var element = layui.element
            , layer = layui.layer
            , util = layui.util
            , $ = layui.$;

        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function (othis) {
                layer.msg('展开左侧菜单的操作', { icon: 0 });
            }

            , menuRight: function () {
                layer.open({
                    type: 1
                    , content: '<div style="padding: 15px;">你好帅</div>'
                    , area: ['260px', '100%']
                    , offset: 'rt' //右上角
                    , anim: 5
                    , shadeClose: true
                });
            }
        });

    });




    document.getElementById('addBtn').onclick = function () {
        location.href = '/add'
    }
    document.getElementById('recyclelistBtn').onclick = function () {
        location.href = '/recyclelist'
    }
    document.getElementById('addImgBtn').onclick = function () {
        location.href = '/addImg'
    }
    //普通删除
    function confirmDelete(id, img) {
        layer.confirm('确认删除吗?确定吗?永久删除数据不可还原', {
            btn: ['是的', '取消'],
            shadeClose: true,
            shade: [0.3, '#000']

        }, () => {
            location.href = "/delete?id=" + id + "&img=" + img
        }, () => {
            layer.msg('已取消')
        });
    }
    //ajax异步删除
    // ajax异步删除
    function ajaxDelete(ele, id, img) {

        layer.confirm('确认删除吗', {
            btn: ['是的', '取消'], //按钮
            shadeClose: true,
            shade: [0.3, '#000']
        }, () => {
            //点了是的按钮触发
            let xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (this.readyState === 4 && this.status === 200) {
                    let data = JSON.parse(this.responseText);
                    let { code, message } = data;
                    if (code === 20000) {
                        // 删除成功,删除当前tr行
                        $(ele).parents('tr').remove()
                        setTimeout(function () {
                            layer.msg('删除成功', { icon: 1 })
                        }, 500)

                        layer.closeAll();
                    } else if (code === 30004) {
                        layer.msg(message)
                        location.href = "/login"
                    } else {
                        layer.msg('删除失败')
                    }
                }
            }
            xhr.open('post', '/ajaxdelete', true)
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
            xhr.send("id=" + id + "&img=" + img + "&flag=ajax")

        }, () => {
            layer.msg('否的')
        });
    }

    //ajax更新头像
    let avaterFile = document.getElementById("avaterFile")
    let preview = document.getElementById('preview')
    document.getElementById("updAvatar").onclick = function () {
        // 执行input文件框单击事件
        avaterFile.click()
        // this.ahsk()
    }// 给文件绑定onchange事件，来判断用户是否上传了文件
    avaterFile.onchange = function () {
        let file = this.files[0]//获取二进制的文件
        if (!file) {
            return;
        }
        let formData = new FormData();
        formData.append('avater', file);

        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (this.readyState === 4 && this.status === 200) {
                let data = JSON.parse(this.responseText)
                let { message, code, src } = data
                layer.msg(message)
                //把服务器返回的图片路径设置img的src中 实现图片预览
                preview.src = '/' + src;
            }
        }
        xhr.open('post', '/uploadAvatar', true)
        xhr.send(formData)
    }

</script>

</html>